<template>
  <div class="longPic">
      <div class="longPicList"  @click="show = true">
         <!-- <div class="info"></div> -->
         <div class="longPicImg">
           <img src="http://placehold.it/225x673" alt="">
         </div>
      </div>
      <div class="layer" v-show="show" @click="show = false" >
       <longLayer></longLayer>
     </div>
  </div>
</template>

<script>
import longLayer from "@/components/longLayer"
export default {
  components: {
    longLayer
  },
  data() {
    return {
      show: false
    };
  }
};
</script>

<style lang="less">
.longPic{
    display: flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 20px 0 0;
    .longPicList{
        position: relative;
        width: 225px;
        height: 673px;
        overflow: hidden;
        // margin: 20px 0;
        background: #fff;
        box-shadow:0px 2px 25px 0px rgba(189,189,189,0.3);
        .longPicImg{
            width: 100%;
            background: #DADADA;
        }
    .info::before {
    content: '';
            position: absolute;
            bottom:0;
            width: 100%;
            height: 0.5em;
            background:
                linear-gradient(135deg, transparent, transparent 45%, #DADADA, transparent 55%, transparent 100%),
                linear-gradient(45deg, transparent, transparent 45%, #DADADA, transparent 55%, transparent 100%);
            background-size: 0.8em 0.8em;
            background-repeat: repeat-x, repeat-x;
            }
    }
}
</style>
